<template>
    <div class="doctorAdmin-box">
        <div class="doctorAdmin-box-head">
            <span></span>
            医生管理
        </div>
        <div class="doctorAdmin-box-nav">
            <span>所属机构</span>
            <el-select v-model="value1" class="m-2" placeholder="请选择" size="large">
                <el-option v-for="item in institutionData" :key="item" :label="item" :value="item" />
            </el-select>

            <span>所属团队</span>
            <el-select v-model="value2" class="m-2" placeholder="请选择" size="large">
                <el-option v-for="item in options" :key="item" :label="item" :value="item" />
            </el-select>

            <span>医生标签</span>
            <el-select v-model="value3" class="m-2" placeholder="请选择" size="large">
                <el-option v-for="item in uniqueArray" :key="item" :label="item" :value="item" />
            </el-select>
            <el-button type="primary" style="width: 95px;margin-left: 20px;"><router-link
                    style="color:white;text-decoration: none;" to="/home/institution/addyx">新增医生信息</router-link></el-button>
            <!-- <deriveBtn :export="doctorList" style="margin-top: -35px;"></deriveBtn> -->
            <el-button @click="daochu">导出数据</el-button>
        </div>
        <div>
            <div class="demo-input-size" style="position: relative;">
                <el-input v-model="input1" style="width: 350px;margin-bottom: 30px;" class="w-50 m-2" size="large"
                    placeholder="请输入关键字" />
                <el-icon class="gjzSearch" style="">
                    <Search />
                </el-icon>
            </div>
        </div>
        <div class="doctorMsg-box">
            <el-table stripe :data="doctorList" style="width: 100%">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column property="number" label="编号" width="140" align="center" />
                <el-table-column label="头像" width="80" align="center">
                    <template #default="scope">
                        <img :src="'http://127.0.0.1:3000/' + scope.row.picture" alt=""
                            style="width: 50px;height: 50px;border-radius: 25px;">
                    </template>
                </el-table-column>
                <el-table-column property="dname" label="姓名" width="80" show-overflow-tooltip align="center" />
                <el-table-column property="tel" label="联系电话" width="125" show-overflow-tooltip align="center" />
                <el-table-column property="rname" label="角色" width="100" show-overflow-tooltip align="center" />
                <el-table-column property="tname" label="所属团队" width="110" show-overflow-tooltip align="center" />
                <el-table-column property="oname" label="所属机构" width="150" show-overflow-tooltip align="center" />
                <el-table-column label="状态" width="80" show-overflow-tooltip align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.flag" class="ml-2" inline-prompt @click="changeSwitch(scope.row)"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #999" active-text="启用"
                            inactive-text="禁用" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="250" show-overflow-tooltip align="center" class="operation">
                    <template #default="scope">
                        <!-- <span>{{ scope.row.id }}</span> -->
                        <span class="operationSpan" @click="sendDoctorId(`/home/institution/ysxq/${scope.row.id}`)"
                            style="color: #2984f8;">查看详情</span>
                        <span class="operationSpan" style="color: #2984f8;"><router-link
                                style="color:#2984f8;text-decoration: none;" to="/home/message">发送消息</router-link></span>
                        <!-- <span class="operationSpan" style="color: #2984f8;" @click="modifyDoctor(scope.row)">编辑</span> -->
                        <span class="operationSpan" style="color: #2984f8;" @click="modifyDoctor(scope.row.id)">编辑</span>
                        <!-- <span>{{ scope.row }}</span> -->
                        <span class="operationSpan" style="color: red;" @click="delDoctor(scope.row.id)">删除</span>
                    </template>

                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import api from '../../api'
import { Search } from '@element-plus/icons-vue'
import { ElTable } from 'element-plus'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

import { getExcel } from '@/utils/yzy/Excel'


const doctorList = ref([])

const input1 = ref('')

const uniqueArray = ref<Array<any>>([])

//获取医生数据
const getDoctorData = async () => {
    const result = await api.ysAdmin.getDoctorMsg()
    console.log('doctor', result.data.data);
    doctorList.value = result.data.data
    doctorLabelData.value = result.data.data.map((items: any) => items.rname)
    doctorLabelData.value.unshift('请选择')
    uniqueArray.value = doctorLabelData.value.filter((item, index) => doctorLabelData.value.indexOf(item) === index);
    console.log('doctorList', doctorList.value);
}

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')

const doctorStatu = ref({
    id: '',
    flag: 0
})
const changeSwitch = (s: any) => {
    console.log('----1111-----', s)
    if (s.flag === true) {
        doctorStatu.value.flag = ''

    } else {
        doctorStatu.value.flag = 1
    }
    doctorStatu.value.id = s.id
    // 调用修改状态的函数
    console.log('参数', doctorStatu.value)

}

// 修改医生状态的接口
const modifyStatus = async () => {
    const res = await api.ysAdmin.changeDoctorStatusApi(doctorStatu.value)
    console.log('修改结果', res)
}

//创建机构数据数组
const institutionData = ref<any>([])
//创建医生标签数组
const doctorLabelData = ref<any>([])

//获取机构种类的数据’
const getInstitutionData = async () => {
    const result = await api.ysAdmin.getInstitutionApi()
    console.log('institution', result.data.data);
    institutionData.value = result.data.data.rows.map((items: any) => items.name)
    institutionData.value.unshift('请选择')

    console.log('institutionData', doctorLabelData.value);
}

//删除医生
const delDoctor = async (id: string) => {
    const result = await api.ysAdmin.delDoctorApi({ id: id })
    if (result.data.code === 200) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
    }
    // console.log('删除医生', result.data);
    getDoctorData()
}

const router = useRouter()

//点击医生详情跳转页面并传递id
const sendDoctorId = (path: any) => {
    router.push(path)
}
//跳转新增页面修改医生信息
// const modifyDoctor = (data: any) => {
//     router.push(`/home/institution/addyx?data=${JSON.stringify(data)}`)
// }
const modifyDoctor = (id: any) => {
    router.push(`/home/institution/addyx?id=${id}`)
}

const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
// 导出
const daochu = () => {
    getExcel(doctorList.value)
}

getDoctorData()
getInstitutionData()
modifyStatus()
</script>

<style lang='scss' scoped>
.doctorAdmin-box {
    background-color: white;
    box-sizing: border-box;
    padding: 20px;

    .doctorAdmin-box-head {
        line-height: 30px;
        margin-bottom: 20px;

        span {
            display: inline-block;
            width: 6px;
            height: 20px;
            background-color: #2984f8;
            border-radius: 3px;
            margin-bottom: -3px;
            margin-right: 8px;
        }

        font-size: 18px;
        font-weight: 500;
        color:rgba(51, 51, 51, 0.898039215686275);
    }

    .doctorAdmin-box-nav {
        margin-bottom: 20px;

        span {
            font-size: 13px;
            color: #999;
            margin-right: 15px;

            &:not(:first-child) {
                margin-left: 20px;
            }
        }
    }

    .gjzSearch {
        position: absolute;
        top: 12px;
        left: 325px;
        color: #999;
        cursor: pointer;
    }

    .gjzSearch:hover {
        color: #2984f8;
    }

    .operationSpan {
        font-size: 13px;
        margin-right: 15px;
    }

    .operationSpan:hover {
        text-decoration: underline;
        cursor: pointer;
    }

}
</style>